import React, { useState } from 'react';
import { Box, Alert, Button } from '@mui/material';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
import InfoSection from './InfoSection';
import InfoItem from './InfoItem';
import { BackgroundInfo } from '../types';
import ResumeUploadDialog from './ResumeUploadDialog';

interface BackgroundInfoSectionProps {
    backgroundInfo: BackgroundInfo | null;
    loading: boolean;
    error: string | null;
    onEdit: () => void;
}

const BackgroundInfoSection: React.FC<BackgroundInfoSectionProps> = ({ backgroundInfo, loading, error, onEdit }) => {
    // 简历上传对话框状态
    const [resumeDialogOpen, setResumeDialogOpen] = useState<boolean>(false);

    // 打开简历上传对话框
    const handleOpenResumeDialog = () => {
        setResumeDialogOpen(true);
    };

    // 关闭简历上传对话框
    const handleCloseResumeDialog = () => {
        setResumeDialogOpen(false);
    };

    // 简历上传成功回调
    const handleUploadSuccess = () => {
        // 实际应用中可能需要重新获取背景信息
        console.log('简历上传成功');
    };

    return (
        <>
            <InfoSection title="背景信息" onEdit={onEdit} loading={loading}>
                {error && (
                    <Alert severity="error" sx={{ mb: 2 }}>
                        {error}
                    </Alert>
                )}
                {backgroundInfo && (
                    <>
                        <Box className="form-grid">
                            {/* <InfoItem label="背景信息ID" value={backgroundInfo.backgroundInfoId} /> */}
                            <InfoItem
                                label="简历"
                                value={
                                    <Button
                                        variant="contained"
                                        startIcon={<CloudUploadIcon />}
                                        onClick={handleOpenResumeDialog}
                                        size="small"
                                        sx={{
                                            backgroundColor: '#e3f2fd',
                                            color: '#fff',
                                            '&:hover': {
                                                backgroundColor: '#bbdefb'
                                            }
                                        }}>
                                        附件上传
                                    </Button>
                                }
                                isUpLoad={true}
                            />
                        </Box>

                        {/* 三个字段在同一行 */}
                        <Box className="full-width-item">
                            <Box
                                sx={{
                                    display: 'grid',
                                    width: '100%',
                                    gap: 2,
                                    gridTemplateColumns: 'repeat(3, 1fr)',
                                    marginTop: 2
                                }}>
                                <InfoItem label="实习次数" value={backgroundInfo.internshipCount} />
                                <InfoItem label="咨询次数" value={backgroundInfo.consultCount} />
                                <InfoItem label="活动次数" value={backgroundInfo.activityCount} />
                            </Box>
                        </Box>

                        {/* 三个字段在同一行 */}
                        <Box className="full-width-item">
                            <Box
                                sx={{
                                    display: 'grid',
                                    width: '100%',
                                    gap: 2,
                                    gridTemplateColumns: 'repeat(3, 1fr)',
                                    marginTop: 2
                                }}>
                                <InfoItem label="毕业计划" value={backgroundInfo.graduatePlan} />
                                <InfoItem label="GRE/GMAT成绩" value={backgroundInfo.greGmat} />
                                <InfoItem label="雅思/托福成绩" value={backgroundInfo.ieltsToefl} />
                            </Box>
                        </Box>

                        {/* 三个字段在同一行 */}
                        <Box className="full-width-item">
                            <Box
                                sx={{
                                    display: 'grid',
                                    width: '100%',
                                    gap: 2,
                                    gridTemplateColumns: 'repeat(3, 1fr)',
                                    marginTop: 2
                                }}>
                                <InfoItem label="意向就业地区" value={backgroundInfo.intendEmploymentArea} />
                                <InfoItem label="意向就业行业" value={backgroundInfo.intendEmploymentIndustry} />
                                <InfoItem label="意向就业岗位" value={backgroundInfo.intendEmploymentPosition} />
                            </Box>
                        </Box>

                        {/* 三个字段在同一行 */}
                        <Box className="full-width-item">
                            <Box
                                sx={{
                                    display: 'grid',
                                    width: '100%',
                                    gap: 2,
                                    gridTemplateColumns: 'repeat(3, 1fr)',
                                    marginTop: 2
                                }}>
                                <InfoItem label="意向升学地区" value={backgroundInfo.intendStudyArea} />
                                <InfoItem label="意向升学院校" value={backgroundInfo.intendStudySchool} />
                                <InfoItem label="意向升学领域" value={backgroundInfo.intendStudyMajor} />
                            </Box>
                        </Box>
                    </>
                )}
            </InfoSection>

            {/* 简历上传对话框 */}
            <ResumeUploadDialog
                open={resumeDialogOpen}
                onClose={handleCloseResumeDialog}
                onUploadSuccess={handleUploadSuccess}
            />
        </>
    );
};

export default BackgroundInfoSection;
